<template>
	<view class="aqara-container">
		<view class="tip" v-if="deviceList.length==0">本店铺还未关联任何智能设备，请先联系管理员设置！</view>
		<view class="device-table" v-else>
			<view class="table-item table-head">
				<text>设备名称</text>
				<text>电路名称</text>
				<text>设备ID</text>
			</view>
			<view class="table-item" v-for="item in deviceList" :key="item.id">
				<text>{{item.equipment_name}}</text>
				<text>{{item.resource_name}}</text>
				<text>{{item.did}}</text>
			</view>
		</view>
		
		<view class="confirm-btn" v-if="deviceList.length!=0" @tap="backPage">
			<view class="btn">返回</view>
		</view>

	</view>
</template>

<script>
	export default{
		data(){
			return{
				deviceList:[]
			}
		},
		onLoad() {
			this.getAqaraList()
		},
		methods:{
			// 获取设备列表
			getAqaraList(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$request.post(this.$api.aqaraList, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						// console.log(data,"设备列表")
						this.deviceList=data	
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 800)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.aqara-container{
		min-height: 100vh;
		padding: 40rpx 34rpx;
		box-sizing: border-box;
		position: relative;
		.tip{
			background: rgb(251, 255, 0);
			font-size: 28rpx;
			padding: 20rpx;
			border-radius: 8rpx;
		}
		.device-table{
			background: #1D1C5C;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 180rpx;
			.table-item{
				display: flex;
				border-bottom:1rpx solid  rgba(255,255,255,0.5);
				&:nth-child(2n){
					background: #353484;
				}
				&:last-child{
					border-bottom: unset;
				}
				>text{
					width: 30%;
					min-height: 64rpx;
					padding: 6rpx 12rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #fff;
					border-right: 1rpx solid  rgba(255,255,255,0.5);
					display: flex;
					justify-content: center;
					align-items: center;
					&:last-child{
						width: 40%;
						border-right: unset;
					}
				}
			}
			.table-head{
				>text{
					font-weight: bold;
					font-size: 28rpx;
				}
			}
		}
		
		.confirm-btn{
			width: 670rpx;
			background: rgb(31, 124, 247);
			border-radius: 72rpx;
			position: absolute;
			bottom: 82rpx;
			left: 50%;
			transform: translateX(-50%);
			.btn{
				height: 90rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>